<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你画我猜</title>
    <script src="lib/js/jquery.min.js"></script>
    <script type="text/javascript" src="lib/js/huabu.js"></script>
    <style type="text/css">
        #cavs {
            border: 1px solid #CC6600;
            border-radius: 25px;
            box-shadow: 10px 10px 5px #888888;
        }

        #kuang {
            margin-left: 40px;
            width: 1100px;
            height: 50px;
            margin-top: 15px;
            border-radius: 25px;
            box-shadow: 10px 10px 5px #888888;
        }

        #k1 {
            float: left;
            margin-left: 43px;
        }

        .button {
            background-color: #F9D448; /* 土黄色 */
            border: none;
            color: white;
            padding: 6px 15px;
            text-align: center;
            border-radius: 25px;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
        }

        .button2:hover {
            box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        }
    </style>
</head>
<body>
<div>在线人数<span id="line-people">0</span></div>
<canvas id="cavs" width="1200" height="542" onmousedown="mouseDown(event)" onmouseup="mouseUp(event)"
        onmousemove="cnvsxy(event)"></canvas>
<br/>
</div>
<div id="kuang">
    <div id="k1">
        <input type="color" id="color" class="button button2">
    </div>
    <div id="k1">
        <input type="button" value="保存" id="baocun" class="button button2">
    </div>
    <div id="k1">
        <input type="button" value="下载" id="xiazai" class="button button2">
    </div>
    <#--<div id="k1">
        <input type="button" value="撤销" id="chexiao" class="button button2">
    </div>
    <div id="k1">
        <input type="button" value="清屏" id="qingping" class="button button2">
    </div>
    <div id="k1">
        <input type="button" value="线条" id="Line" class="button button2">
    </div>
    <div id="k1">
        <input type="button" value="橡皮" id="xpc" class="button button2">
    </div>-->
    <div id="k1">
        <input class="button button2" type="range" id="cuxi" value="3" min="0" max="10">
    </div>
</div>
<script>
    var flag = false;
    var times = 0;
    function mouseDown(e) {
        flag = true;
    }

    function mouseUp(e) {
        flag = false;
    }

    function cnvsxy(e) {
        var data = {"fontsize": context.lineWidth,"x": e.clientX,"y":e.clientY,"color":context.strokeStyle,"times":new Date().getTime(),"count":"count-value"};
        if (flag) {
            send(data);
        }
    }
</script>
<script>
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://"+location.host+"/socketgame");
    }else {
        alert('当前浏览器不支持websocket')
    }

    //连接成功建立的回调方法
    websocket.onopen = function (event) {
        // var data = $.parseJSON( event.data );
        // document.getElementById('line-people').innerHTML=data.count;
       console.log("WebSocket连接成功");
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        console.log("WebSocket连接关闭");
    }
    //发送消息
    function send(res) {
          times = res.times;
          websocket.send(JSON.stringify(res));
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        var fontsize = 2;
        var data = $.parseJSON( event.data );
        if(times != data.times ){
            document.getElementById('line-people').innerHTML=data.count;
            context.fillStyle=data.color;
            context.fillRect(data.x,data.y,fontsize,fontsize);
        }
    }
</script>
</body>
</html>